<template>
  <section class="personal-msg">
    <div class="inner">
      <ul class="tab">
        <li class="tab-item" :class="{active: i.id === selected}" v-for="i in tabList" :key="i.id" @click="selected = i.id">
              <span>
              {{i.name}}
              <span class="count" v-if="i.count">
                ({{i.count}})
              </span>
            </span>
        </li>
      </ul>
      <div class="tabs-content">
        <msg-item :listinfo="list"></msg-item>
        <div class="page-container">
          <Page :total="100" prev-text="上一页" next-text="下一页" />
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import MsgItem from '@/components/ListItem/MsgItem'
export default {
  name: 'PersonalMsg',
  components: {
      MsgItem
  },
   data () {
      return {
        selected: 0,
        tabList: [
            {id: 0, name: '系统通知',count: 0},
            {id: 1, name: '未读', count: 10},
            {id: 2, name: '已回复', count: 10}
        ],
        list: [
            {id: 1, num: 2, name: 'Avana', img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',msg: '测试数据看看就好，测试数据源看看就好'},
            {id: 2, num: 3, name: 'Avana', img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',msg: '测试数据看看就好，测试数据源看看就好'},
            {id: 3, num: 1, name: 'Avana', img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',msg: '测试数据看看就好，测试数据源看看就好'},
            {id: 4, num: 7, name: 'Avana', img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',msg: '测试数据看看就好，测试数据源看看就好'},
            {id: 5, num: 0, name: 'Avana', img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',msg: '测试数据看看就好，测试数据源看看就好'},
            {id: 6, num: 0, name: 'Avana', img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg',msg: '测试数据看看就好，测试数据源看看就好'}
        ]
      }
   },
    created () {
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
  @import "../../../style/style.less";
  .personal-msg {
    .tab {
      border: 1px solid @border-color;
      border-bottom: 0;
      background-color: #f5f5f5;
      &:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
      }
      .tab-item {
        float: left;
        width: 33.3333%;
        height: 43px;
        line-height: 43px;
        text-align: center;
        color: #666;
        background-color: #f5f5f5;
        border-right: 1px solid @border-color;
        border-bottom: 1px solid @border-color;
        position: relative;
        cursor: pointer;
        &:last-child {
          border-right-color: transparent;
        }
      }
      .tab-item.active {
        border-bottom-color: transparent;
        background-color: #fff;
        color: @theme-color;
        &:before {
          content: '';
          width: 100%;
          height: 3px;
          background-color: @theme-color-dark;
          position: absolute;
          top: -1px;
          left: 0;
        }
      }
    }
    .tabs-content {
      padding-top: 15px;
      .page-container {
        padding: 20px 0;
        text-align: center;
      }
    }
  }
</style>
